<template>
  <div class="counter-warp">
    <p>Vuex counter：{{ count }}</p>
    <p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
      <button @click="network">-</button>
    </p>

    <a href="/pages/index/main" class="home">去往首页</a>
  </div>
</template>

<script>
  // Use Vuex
  import store from "./store";

  export default {
    computed: {
      count() {
        return store.state.count;
      }
    },
    methods: {
      increment() {
        store.commit("increment");
      },
      decrement() {
        store.commit("decrement");
      },
      network() {
        this.http.get("/api/xiandu/top_categories")
          .then(function(d) {
            console.log("请求成功:", d);
          }).catch(function(e) {
          console.log("请求失败", e);
        });
      }
    }
  };
</script>

<style>
  .counter-warp {
    text-align: center;
    margin-top: 100px;
  }

  .home {
    display: inline-block;
    margin: 100px auto;
    padding: 5px 10px;
    color: blue;
    border: 1px solid blue;
  }
</style>
